<template>
  <view class="page">
    <!-- 打卡日历页面 -->
    <view class='all'>
      <view class="bar">
        <!-- 上一个月 -->
        <!--       <view class="previous" @click="handleCalendar(0)">
          <button class="barbtn">上一月</button>
        </view> -->
        <!-- 显示年月 -->
        <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
        <!-- 下一个月 -->
        <!--       <view class="next" @click="handleCalendar(1)">
          <button class="barbtn">下一月</button>
        </view> -->
      </view>
      <!-- 显示星期 -->
      <view class="myDateTable">
        <view class="dateCell cellHead" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
      </view>
      <view class="myDateTable">
        <view v-for="(item,j) in days" :key="j" class="dateCell"
          :class="{'cell': item.date, 'cell-active': item.isSign == 2 }">

          <view class="">
            {{item.dateStr}}
          </view>
          <view class="" v-if="item.isSign == 2">
            已签
          </view>



          <!--<view v-if="item.date==undefined || item.date == null" class='cell'>
            <text :decode="true">&nbsp;&nbsp;</text>
          </view>
          <view v-else @click="clickSignUp(item.date)">
            <view v-if="item.isSign == 2" class='cell yellow bg-pink'>
              <text>{{item.date}}</text>
            </view>
            <view class="cell white bg-red" v-else-if="item.isSign == 3">
              <text>{{item.date}}</text>
            </view>
            <view class="whiteColor cell" v-else>
              <text>{{item.date}}</text>
            </view>
          </view> -->

        </view>
      </view>
    </view>
    <u-button text="立即签到" shape="circle" icon="checkmark" type="primary" @click="handleSign()"></u-button>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        days: [], //日历
        SignUp: [], //已经签到日期
        cur_year: 0, //当前选的年
        cur_month: 0, //当前选的月
        today: parseInt(new Date().getDate()), //今天
        toMonth: parseInt(new Date().getMonth() + 1), //本月
        toYear: parseInt(new Date().getFullYear()), //本年
        weeks_ch: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      };
    },
    props: {
      //年
      sendYear: {
        type: Number,
        default: new Date().getFullYear()
      },
      //月
      sendMonth: {
        type: Number,
        default: new Date().getMonth() + 1
      },
    },
    created() {
      this.cur_year = this.sendYear; //年
      this.cur_month = this.sendMonth; //月
      this.calculateEmptyGrids(this.cur_year, this.cur_month);
      this.calculateDays(this.cur_year, this.cur_month);
      //TODO 网络请求
      this.onJudgeSign(this.SignUp);
    },
    methods: {
      // 获取当月共多少天
      getThisMonthDays(year, month) {
        return new Date(year, month, 0).getDate()
      },
      // 获取当月第一天星期几
      getFirstDayOfWeek(year, month) {
        return new Date(Date.UTC(year, month - 1, 1)).getDay();
      },
      // 计算当月1号前空了几个格子，把它填充在days数组的前面
      calculateEmptyGrids(year, month) {
        //计算每个月时要清零
        this.days = [];
        const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
        if (firstDayOfWeek > 0) {
          for (let i = 0; i < firstDayOfWeek; i++) {
            var obj = {
              date: null,
              fullDate: null,
              isSign: false,
              dateStr: ''
            }
            this.days.push(obj);
          }
        }
      },
      // 绘制当月天数占的格子，并把它放到days数组中
      calculateDays(year, month) {
        const nowDate = new Date().getDate()
        const thisMonthDays = this.getThisMonthDays(year, month);
        for (let i = 1; i <= thisMonthDays; i++) {
          var fullDate = new Date(year + '-' + month + '-' + i).getTime();
          var obj = {
            date: i,
            fullDate: fullDate,
            isSign: false,
            dateStr: i == nowDate ? '今天' : i
          }
          // console.log(nowDate)
          this.days.push(obj);
        }
      },
      //匹配判断当月与当月哪些日子订餐
      onJudgeSign(date) {
        // debugger
        var signs = date;
        var daysArr = this.days;
        //日期相同，订过餐
        // for (var i = 0; i < signs.length; i++) {
        //   for (var j = 0; j < daysArr.length; j++) {
        //     if (daysArr[j].fullDate == signs[i]) {
        //       console.log('is signed' + signs[i])
        //       daysArr[j].isSign = 2;
        //     }
        //   }
        // }
        daysArr.forEach(function(item) {
          // console.log(JSON.stringify(item))
          if (item && item.fullDate && signs.includes(item.fullDate)) {
            item.isSign = 2
          }
        });
        this.days = daysArr;
      },
      // 切换控制年月，上一个月，下一个月
      // handleCalendar(type) {
      //   const cur_year = parseInt(this.cur_year);
      //   const cur_month = parseInt(this.cur_month);
      //   var newMonth;
      //   var newYear = cur_year;
      //   if (type === 0) { //上个月
      //     newMonth = cur_month - 1;
      //     if (newMonth < 1) {
      //       newYear = cur_year - 1;
      //       newMonth = 12;
      //     }
      //   } else {
      //     newMonth = cur_month + 1;
      //     if (newMonth > 12) {
      //       newYear = cur_year + 1;
      //       newMonth = 1;
      //     }
      //   }
      //   this.calculateEmptyGrids(newYear, newMonth);
      //   this.calculateDays(newYear, newMonth);

      //   //网络请求
      //   this.SignUp = [3, 18];
      //   this.onJudgeSign(this.SignUp);

      //   this.cur_year = newYear;
      //   this.cur_month = newMonth;

      //   // this.SignUp = []; //清空
      //   this.$emit('dateChange', this.cur_year + "-" + this.cur_month); //传给调用模板页面去拿新数据
      // },
      //点击日期
      // clickSignUp(t) {
      //   console.log(this.cur_year + '年' + this.cur_month + '月' + t + '日')
      //   var t = t; //点击的天
      //   var signs = this.SignUp;
      //   var daysArr = this.days;
      //   //日期相同，订过餐,点击的日期
      //   for (var i = 0; i < signs.length; i++) {
      //     for (var j = 0; j < daysArr.length; j++) {
      //       if (daysArr[j].date == signs[i]) {
      //         daysArr[j].isSign = 2;
      //       }
      //       if (t == daysArr[j].date) {
      //         daysArr[j].isSign = 3
      //       }
      //       if (daysArr[j].isSign != 2 && t != daysArr[j].date) {
      //         daysArr[j].isSign = 1;
      //       }
      //     }
      //   }
      //   this.days = daysArr;
      // },
      handleSign() {
        var now = new Date(); //获取当前年月日: Tue Nov 22 2016 17:34:55 GMT+0800 (中国标准时间）
        var year = now.getFullYear(); //获取完整的年份(4位,1970-????)
        var month = now.getMonth() + 1; //获取当前月(0-11,0代表1月,老外系统，国内加1)
        var date = now.getDate(); //获取当前日(1-31)

        var nowTime = new Date(year + '-' + month + '-' + date)
        console.log(nowTime.getTime())
        console.log(nowTime)

        if (this.SignUp.includes(nowTime.getTime())) {
          this.$modal.msg('你已经签到过')
        } else {
          this.$modal.msgSuccess('签到成功')
          this.SignUp.push(nowTime.getTime())

          //TODO 网络请求
          this.onJudgeSign(this.SignUp);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    margin: 0 20px;
  }

  .all .bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10rpx;
    align-items: center;

    .barbtn {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }
  }


  /* 星期 */
  .all .week {
    padding: 30rpx;
    // background-color: #baf;
    // 设置父元素成为弹性盒
    display: flex;
    // 让弹性盒元素在必要的时候拆行
    flex-wrap: wrap;
    border-radius: 10px;
    background-color: #fff;
    margin: 2.5vw 0;
  }

  .week_ri {
    /* margin-left: 19rpx; */
    padding: 0 48rpx 0 0;
    /* text-align: center; */
  }

  .myDateTable {
    // background: #fff;
    padding: 15rpx;
    display: flex;
    // 让弹性盒元素在必要的时候拆行
    flex-wrap: wrap;

    .cell {
      background: rgba(0, 0, 0, 0.07);
    }

    .cell-active {
      background-color: pink;
    }

    .dateCell {
      font-size: 13px;
      text-align: center;
      // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
      // 同时设置下边距margin-bottom（每个元素的上下间隙）
      margin: 0 10rpx 10rpx 0;
      width: calc((100% - 120rpx) / 7);
      // background: pink;
      border-radius: 5px;
      // 这里一行显示4个，所以是/4，一行显示几个就除以几
      // 这里的120rpx = (分布个数7-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 60rpx) / 7);
      max-width: calc((100% - 60rpx) / 7);
      height: 40px;
      // line-height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      // 去除第7n个的margin-right,也就是每行最右侧的那个不设置右外边距
      &:nth-child(7n + 7) {
        margin-right: 0;
      }
    }
  }


  .dateCell .cell {
    display: flex;
    // border-radius: 50%;
    // height: 9vw;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }

  .dateCell .cellHead {}

  .greenColor {
    color: #01b90b;
    font-weight: bold;
  }

  .bgWhite {
    background-color: #fff;
  }

  .bgGray {
    background-color: rgba(255, 255, 255, 0.42);
  }

  .bgBlue {
    font-size: 14px;
    background-color: #4b95e6;
  }

  .redColor {
    color: #ff0000;
  }

  .TipArea {
    word-break: break-all;
    word-wrap: break-word;

    font-size: 14px;
    padding: 10px;
  }

  .impTip {
    display: inline-block;
    color: #ff0000;
  }

  .title {
    font-size: 32rpx;
    color: #303133;
    line-height: 46rpx;
    padding-left: 40rpx;
    padding-right: 30px;
    margin-top: 20rpx;
  }

  .bot {
    flex-direction: row;
    padding-left: 40rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  .author {
    display: inline-block;
    margin-left: 10px;
    font-size: 26rpx;
    color: #aaa;
  }

  .content {
    font-size: 26rpx;
    color: #aaa;
    margin-left: 20rpx;
  }
</style>
